import React from 'react';
import { NavBar, Card, Space, Avatar } from 'antd-mobile';
import { useHistory, useLocation } from 'umi';
import { Ellipsis, BarChartO } from '@react-vant/icons';
import { NumberKeyboard, hooks, Field } from 'react-vant';
import './index.scss';

export default function Index() {
  const history = useHistory();
  const location = useLocation();
  const back = () => {
    history.goBack();
  };
  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ '--gap': '16px' }}>
        <Ellipsis />
      </Space>
    </div>
  );
  const [state, set] = hooks.useSetState({
    visible: false,
    value: '',
  });
  let aa = <BarChartO />;
  return (
    <>
      <div className="content">
        <NavBar
          onBack={back}
          right={right}
          style={{
            backgroundColor: '#f6f5f6',
            position: ' sticky',
            top: '0',
            zIndex: '99999',
          }}
        >
          在线咨询
        </NavBar>
        <div>
          <div>
            <Space block wrap>
              <Avatar
                style={{ borderRadius: '50%' }}
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpubres.aihecong.com%2Fsite%2Farticle%2F%25E5%259F%25B9%25E5%2585%25BB%25E5%25AE%25A2%25E6%259C%258D%25E7%259A%2584%25E7%25B4%25A0%25E8%25B4%25A8.jpg&refer=http%3A%2F%2Fpubres.aihecong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672572013&t=75f8773628327ade7e934f3243c3cc3a"
              />
              ZXZX
            </Space>
            <Card>你好亲，有什么可以帮助你的吗？</Card>
          </div>
          <div>
            <Space block wrap style={{ marginTop: '.3rem' }}>
              <Avatar
                style={{ borderRadius: '50%' }}
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpubres.aihecong.com%2Fsite%2Farticle%2F%25E5%259F%25B9%25E5%2585%25BB%25E5%25AE%25A2%25E6%259C%258D%25E7%259A%2584%25E7%25B4%25A0%25E8%25B4%25A8.jpg&refer=http%3A%2F%2Fpubres.aihecong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672572013&t=75f8773628327ade7e934f3243c3cc3a"
              />
              ZXZX
            </Space>
            <Card>
              我们可以为您选择适合您的婚纱，如果有什么不满意的地方，请及时联系我，我们会帮您处理的哦亲亲
            </Card>
          </div>
          <div style={{ marginTop: '.3rem' }}>
            <Space block wrap style={{ float: 'right' }}>
              我
              <Avatar
                style={{ borderRadius: '50%' }}
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpubres.aihecong.com%2Fsite%2Farticle%2F%25E5%259F%25B9%25E5%2585%25BB%25E5%25AE%25A2%25E6%259C%258D%25E7%259A%2584%25E7%25B4%25A0%25E8%25B4%25A8.jpg&refer=http%3A%2F%2Fpubres.aihecong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672572013&t=75f8773628327ade7e934f3243c3cc3a"
              />
            </Space>
            <Card className="right">好评哦</Card>
          </div>
          <div style={{ marginTop: '2rem' }}>
            <Space block wrap style={{ marginTop: '.3rem' }}>
              <Avatar
                style={{ borderRadius: '50%' }}
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpubres.aihecong.com%2Fsite%2Farticle%2F%25E5%259F%25B9%25E5%2585%25BB%25E5%25AE%25A2%25E6%259C%258D%25E7%259A%2584%25E7%25B4%25A0%25E8%25B4%25A8.jpg&refer=http%3A%2F%2Fpubres.aihecong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672572013&t=75f8773628327ade7e934f3243c3cc3a"
              />
              ZXZX
            </Space>
            <Card style={{ width: '3rem' }}>谢谢亲~</Card>
          </div>
        </div>
        <div className="bott">
          <Field
            label={aa}
            value={state.value}
            readOnly
            onClick={() => set({ visible: true })}
          />
          <NumberKeyboard
            value={state.value}
            visible={state.visible}
            maxlength={6}
            onChange={(v) => set({ value: v })}
            onBlur={() => set({ visible: false })}
          />
        </div>
      </div>
    </>
  );
}
